<template>
	<view>
		<!-- #ifdef APP-PLUS |H5 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!-- <view class="status_bar"></view> -->
		<!-- #endif -->
		<view
			id="myNavbar"
			class="my_navbar"
			:style="{
				position: fixed == true ? 'fixed' : '',
				background: background,
			}"
		>
			<view class="left_area" @click="leftClick">
				<text
					:class="leftIcon"
					class="custom-icon"
					v-if="leftIcon"
					:style="{ color: leftIconColor }"
				></text>
				<text class="left_text" :style="{color:leftColor}">
					{{ leftText }}
				</text>
			</view>

			<view class="center-area" :style="{color:color}">
				<text>{{ title }}</text>
			</view>

			<view class="right_area" @click="rightClick">
				<!-- <text :class="rightIcon" class="custom-icon"></text> -->
				<image
					v-if="rightIcon"
					class="right_icon"
					:src="'../../static/image/' + rightIcon + '.png'"
					mode="aspectFill"
				></image>
				<text :style="{ color: rightColor }">{{ rightText }}</text>
			</view>
		</view>
		<!-- <view class="my_navbar"></view> -->
		<view class="navbar_height" v-if="hasNavbarHeight "></view>
	</view>
</template>

<script>
export default {
	props: {
		fixed: {
			type: Boolean,
			default: true,
		},
		leftText: {
			type: String,
			default: "返回",
		},
		leftIcon: {
			type: String,
			default: "custom-icon-jiantou2",
		},
		title: {
			type: String,
			default: "",
		},
		rightText: {
			type: String,
			default: "",	
		},
		rightIcon: {
			type: String,
			default: "",
		},
		rightColor: {
			type: String,
			default: "#6CB19B",
		},
		background: {
			type: String,
			default: "#F6F6F7",
		},
		leftColor:{
			type:String,
			default:"",
		},
		leftIconColor: {
			type: String,
			default: "",
		},
		color:{
			type: String,
			default:"white",
		},
		url:{
			type:String,
		},
		// 否需要显示导航栏的高度
		hasNavbarHeight : {
			type: Boolean,
			default: true,
		}
	},
	methods: {
		leftClick() {
			this.$emit("leftClick");
		},
		rightClick() {
			this.$emit("rightClick");
		},
	},
	mounted() {
		if(this.url){
			let myNavbar = document.getElementById("myNavbar")
			myNavbar.style.backgroundImage = `url(${this.url})`
			myNavbar.style.backgroundSize = "100% 100%"
		}
	},
};
</script>

<style lang="scss" scoped>
.navbar_height {
	// #ifdef APP-PLUS
	height: calc(80rpx + var(--status-bar-height));
	// #endif
	// #ifndef APP-PLUS
	height: 80rpx;
	// #endif
}

.my_navbar {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	top: 0;
	// padding: 0 20rpx 0 10rpx;
	padding: 0 30rpx;
	z-index: 9;
	// #ifdef APP-PLUS
	top: var(--status-bar-height);
	// #endif
	.custom-icon {
		font-size: 20px;
	}

	.left_area {
		display: flex;
		align-items: center;
	}

	.left_text {
		display: inline-block;
		padding-left: 10px;
		font-weight: bold;
		font-size: 32rpx;
	}

	.right_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.custom-icon-jiantou2 {
		font-size: 50rpx;
		color: black;
		height: 52rpx;
		line-height: 56rpx;
	}
}
.center-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36rpx;
  font-weight: bold;
}
</style>
